<template>
    <div class="main">
        <PageTitle title="个人资料"></PageTitle>
        <div class="item">
            <div class="margin">
                LOGO: 
                <Upload
                    :fileListArr="logo"
                    :fileListName="'logo'"
                    :fileMaxCount="1"
                    @fileChange="fileChange"
                ></Upload>
            </div>
           <!--  <div class="btn">
                <el-button type="primary" size="mini" @click="Margin">申请退还</el-button>
            </div> -->
        </div>
        <div class="item">
            <div class="name">账号：{{form.username}}</div>
            <div class="btn">
                <el-button type="primary" size="mini" @click="Logout">注销账号</el-button>
            </div>
        </div>
        <div class="item">
            <div class="password">
                密码：******
            </div>
            <div class="btn">
                <el-button type="primary" size="mini" @click="changepassword">修改密码</el-button>
            </div>
        </div>
        <div class="item">
            <div class="password">
                认证：{{form.taril == 1?'（已认证）':'（未认证）'}}
            </div>
            <div class="btn">
                <el-button type="primary" size="mini" @click="certification">{{form.taril == 1?'查看':'前往认证'}}</el-button>
            </div>
        </div>
        <div class="item">
            <div class="account">
                账户：{{form.card}}
            </div>
            <div class="btn">
                <el-button type="primary" size="mini" @click="account">{{form.card?'查看':'绑定'}}</el-button>
            </div>
        </div>
        <div class="item">
            <div class="margin">
                保证金： 
                <Upload
                    :fileListArr="margin"
                    :fileListName="'margin'"
                    :fileMaxCount="1"
                    @fileChange="fileChange"
                ></Upload>
            </div>
           <!--  <div class="btn">
                <el-button type="primary" size="mini" @click="Margin">申请退还</el-button>
            </div> -->
        </div>
    </div>
</template>
<script>
import PageTitle from '@/components/pageTitle/PageTitle.vue'
import Upload from '@/components/upload/Upload.vue'
export default {
    components:{
        PageTitle,
        Upload
    },
    data(){
        return{
            content:null,
            form:{
                username:null,
                card:null,
                taril:null,
            },
            margin:[],//保证金图片
            logo:[],//LOGO
        }
    },
    activated(){
        this.margin=[]
        this.logo = []
        this.getDetail()
    },
    methods:{
        //上传图片
        fileChange(data) {
            console.log('上传图片data------',data)
            if (data.arr.length>0) {
                
                if (data.el == 'logo') {
                    this.upLogo(data.arr[0].id)
                }else{
                    this.upmargin(data.arr[0].id)
                }
            }
        },
        //账户管理
        account(){
            this.$router.push('/personalinfo/accountsettings/detail/none')
        },
        //注销账号
        Logout(){
            this.$confirm('注销后将永久删除该账号信息,是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log('确定注销')
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        },
        //修改密码
        changepassword(){
            this.$router.push('/personalinfo/changepassword')
        },
        //认证
        certification(){
            this.$router.push('/personalinfo/certification')
        },
        //申请退还保证金
        /* Margin(){
            this.$confirm('确定申请退还保证金?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log('确定')
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        }, */
        
        async getDetail(){
            let {data:{code,data}}= await this.$axios({
                url: this.$api + '/v1/channel/detail',
                method: 'GET',
                params: {
                    
                }
            })
            if (code == 0) {
                this.form={
                    username:data.username,
                    card:data.card,
                    taril:data.taril
                }
                if (data.url) {
                    this.margin.push({id:data.eid,url:data.url})
                }
                if (data.furl) {
                    this.logo.push({id:data.log,url:data.furl})
                }
            }
        },
        //上传保证金图片
        async upmargin(id){
            let {data:{code,data}} = await this.$axios({
                url: this.$api + '/v1/channel/payment',
                method:'POST',
                data:{
                    payment:id
                }
            })
            console.log('图片上传成功---------',data)
            if (code == 0) {
                this.$message({
                    message: data,
                    type: 'success'
                });
            }else{
                
                this.margin = []
            }
        },
        //上传LOGO
        async upLogo(id){
            let {data:{code,data}} = await this.$axios({
                url: this.$api + '/v1/order/log',
                method:'POST',
                data:{
                    log:id
                }
            })
            console.log('logo图片上传成功---------',data)
            if (code == 0) {
                this.$message({
                    message: data,
                    type: 'success'
                });
            }else{
                
                this.logo = []
            }
        }
    }
}
</script>
<style scoped>
    .item{
        display: flex;
        padding: 20px 0;
        width: 400px;
        justify-content: space-between;
    }
    .item>div{
        margin-right: 20px;
    }
</style>